<template>
  <div class="rank">
    <scroll class="scroll">
      <div class="content">
        <ul class="list">
          <li @click="selectItem" class="item">
            <div class="icon">
              <img width="100px" height="100px" src="http://y.gtimg.cn/music/common/upload/iphone_order_channel/toplist_4_300_203875787.jpg">
            </div>
            <div class="desc">
              <p>1 歌曲已</p>
              <p>2 歌曲二</p>
              <p>3 歌曲三</p>
            </div>
          </li>
          <li class="item">
            <div class="icon">
              <img width="100px" height="100px" src="http://y.gtimg.cn/music/common/upload/iphone_order_channel/toplist_4_300_203875787.jpg">
            </div>
            <div class="desc">
              <p>1 歌曲已</p>
              <p>2 歌曲二</p>
              <p>3 歌曲三</p>
            </div>
          </li>
        </ul>
      </div>
    </scroll>
    <router-view></router-view>
  </div>
</template>

<script>
  import Scroll from 'base/scroll/scroll'
  import {getRank} from 'api/rank'

  export default {
    methods: {
      selectItem () {
        this.$router.push('/rank/1')
      },
      _getRank () {
        getRank()
      }
    },
    created () {
      this._getRank()
    },
    components: {
      Scroll
    }
  }
</script>

<style scoped lang="stylus">
  @import '~common/stylus/variable.styl'
  .rank
    position fixed
    top 100px
    left 0
    bottom 0
    width 100%
    .scroll
      .content
        .list
          .item
            display flex
            align-item flex
            background-color $color-highlight-background
            height 100px
            width 90%
            margin 0 auto 10px auto
            .icon
              width 100px
              height 100px
            .desc
              line-height 25px
              margin-left 10px
              color $color-text-d
              display flex
              flex-direction column
              justify-content center
              align-content center

</style>
